<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			#container {
				width: 100%;
				height: 100vh;
				background-color: gray;
			}
			
			.custom-content-marker {
				width: 40px;
				height: 40px;
				align-content: center; //子元素水平居中
				/* 子元素间距 */
				gap: 5px;
				flex-direction: column; //垂直排列
				border-radius: 10px;
				padding: 5px;
			}
			
			.custom-content-marker img {
				width: 100%;
				height: auto;
				/* 限制图片高度 */
				max-height: 200px;
				/* 保持比例裁剪 */
				object-fit: cover;
				border-radius: 4px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}
			
			.nyssa-marker {
				width: 60px;
				height: 60px;
				align-content: center; //子元素水平居中
				/* 子元素间距 */
				gap: 5px;
				flex-direction: column; //垂直排列
				border-radius: 10px;
				padding: 5px;
				background-color: white;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}
			
			.nyssa-marker img {
				width: 100%;
				height: auto;
				/* 限制图片高度 */
				max-height: 200px;
				/* 保持比例裁剪 */
				object-fit: cover;
				border-radius: 4px;
				box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			}
		</style>
	</head>

	<body>
		<div id="container"></div>
	</body>

</html>

<script type="text/javascript">
	window._AMapSecurityConfig = {
		securityJsCode: "964d578f70db7738308623527f2e5f0c",
	};
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=e83f0ffa29f893c351ffbab43497b7ec"></script>
<script type="text/javascript">
	//地图初始化应该在地图容器 <div> 已经添加到 DOM 树之后
	var map = new AMap.Map("container", {
		zoom: 12, //地图缩放级别
		center: [116.397428, 39.90923] //中心点坐标
	});

	//窗体加载完成后
	window.onload = function() {
		// 执行方法，获取位置信息
		window.nyssaLocation.setCurrentLocation_hm()
		//通过鸿蒙端调用网页setLocation方法，设置地图中心点并标记
		window.nyssaLocation.setNyssaLocation_hm()
	}

	function setLocation(lon, lat) {
		//		window.nyssaLocation.alert("网页端设置地图的经纬度为：" + lon, lat)
		map.setZoomAndCenter(20, [lon, lat])

		//设置当前位置
		const content = `<div class="custom-content-marker">
        <img src="">
        </div>`;

		const marker = new AMap.Marker({
			content: content, //自定义点标记覆盖物内容
			position: [lon, lat], //基点位置
			offset: new AMap.Pixel(-13, -30), //相对于基点的偏移位置
		});
		map.add(marker);
	}

	//设置果树位置
	function setNyssaLocation(lon, lat, url, nyssaName) {
		console.info(`已接收参数:${lon},${lat},${url},${nyssaName}`);
		//上面是果树图片，下面是果树名称
		const content = `
		<div class="nyssa-marker">
	        <img src= "${url}">
	        <div>${nyssaName}</div>
        </div>`;

		var NumLon = parseFloat(lon)
		var NumLat = parseFloat(lat)
		console.info(`转换:${NumLon},${NumLat}`);

		const marker = new AMap.Marker({
			content: content, //自定义点标记覆盖物内容
			position: [NumLon, NumLat], //基点位置
			offset: new AMap.Pixel(-13, -30), //相对于基点的偏移位置
		});
		map.add(marker);
	}
</script>